<template>
	<view>
		<view class="truck_item">
			<view class="div_item">
				<view>大车费</view>
				<span style="display: flex;align-items: center;">
					￥<input class="et_freight" type="digit" maxlength="8" :value="freight" @input="onInputFreight" />
				</span>
			</view>
			<view class="div_item" @click.stop="onSelBank">
				<view>选择银行卡</view>
				<span>{{bank_card.bank_code || '点击选择'}} ></span>
			</view>
		</view>

		<view class="btn_div">
			<view class="btn_ok" @click.stop="onOk">提交申请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apply: {}, // 传过来的运费申请对象
				freight: 0, // 大车费
				bank_card: {}, // 选择的银行卡对象
			}
		},

		onLoad(opt) {
			let that = this

			let apply_josn_str = uni.getStorageSync('apply_info')
			this.apply = JSON.parse(apply_josn_str)
			console.log('传过来的apply = ', this.apply);
			this.freight = this.apply.freight_amount
			this.bank_card = this.apply.bank

			// 事件总线:收到选择银行卡事件
			uni.$on('onSelBankCard', data => {
				console.log('监听到事件来自onSelBankCard,携带参数 data =', data.bank);
				that.bank_card = data.bank
			})

		},

		methods: {

			// 选择银行卡
			onSelBank() {
				// uni.showToast({
				// 	title:'选择银行卡',icon:'none'
				// })
				uni.navigateTo({
					url: '/pages/my/a_xuanzezhanghu'
				})
			},

			// 监听输入的大车费
			onInputFreight(e) {
				// console.log('监听输入大车费.e = ', e);
				this.freight = e.detail.value
			},

			// 点击:确定
			onOk() {
				let that = this
				console.log('输入的大车费 = ', that.freight);
				if (!that.freight || that.freight <= 0) {
					uni.showToast({ title: '请输入大车费', icon: 'none' })
					return
				}
				if (!that.bank_card || !that.bank_card.id) {
					uni.showToast({ title: '请选择银行卡', icon: 'none' })
					return
				}
				that.freightApply()
			},

			// 重新申请车费
			async freightApply() {
				let that = this
				let res = await that.$rqt.Freight_apply({
					apply_id: that.apply.id,
					id: that.apply.transferid,
					car_id: that.apply.car_id,
					bank_id: that.bank_card.id,
					freight: that.freight,
				})
				console.log('freightApply = ', res);

				uni.$emit('onReApplyFreight', {}) // 发送重新申请车费的消息

				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
					success: res => {},
				});

			},

		}
	}
</script>

<style scoped>
	.truck_item {
		margin: 24rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		padding: 0 0 20rpx 0;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 24rpx 0 24rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.btn_div {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 24rpx 0 0 0;
	}

	.btn_ok {
		background-color: #1890FF;
		width: 288rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 4rpx;
		margin: 40rpx 0 0 0rpx;
	}

	.et_freight {
		border-bottom: solid 1rpx rgba(0, 0, 0, 0.15);
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 0 4rpx 0;
		width: 240rpx;
	}
</style>